import { Table } from 'antd';
import { TableProps } from 'antd/es/table'
import dayjs from 'dayjs';
import React from 'react'
import { User } from './search-panel';
// react-router和react-router-dom的关系类似于react与react-dom：前者主要处理理论逻辑，后者处理渲染逻辑（与浏览器关联）
import { Link } from 'react-router-dom'

export interface Project {
  id: string;
  name: string;
  personId: string;
  pin: string;
  organization: string;
  created: number
}
// TableProps能够让Table属性直接在父元素设定，这样就不需要一直在Table中声明属性传入参数
interface ListProps extends TableProps<Project>{
  users: User[]
}
export const List = ({users, ...props}: ListProps) => {
  return (
    <Table 
      pagination={false}
      rowKey={'id'}
      columns={[
        {
          title: '名称',
          sorter:(a,b) => a.name.localeCompare(b.name),
          render(value, project) {
            return <Link to={String(project.id)}>{project.name}</Link>
          }
        },
        {
          title: '部门',
          dataIndex: 'organization',
          sorter:(a,b) => a.name.localeCompare(b.name)
        },
        {
          title: '负责人',
          render(value, project) {
            return <span>
              {users.find((user:User) => user.id === project.personId)?.name || '未知'}
            </span>
          }
        },
        {
          title: '创建时间',
          render(value, project) {
            return <span>
              {project.created ? dayjs(project.created).format('YYYY-MM-DD') : '无'}
            </span>
          }
        }
      ]} 
      // 传入的是父组件中声明的新的属性
      {...props} />
  )
}